<template>
    <section class="search-result-container"
    >
        <div class="search-result">
            <ul>
                <li class="category-item" >
                    <label> </label>
                    <ul>
                        <li v-for="(user, index) in userList" :key="index">
                            <div class="search-result-item contact" @click.stop="chatToContact(user)">
                                <Blockies 
                                 class="avatar"
                                draggable="false" :seed="user.from" :size="18" :scale="2" spotcolor="#000" />
                                <span>{{  splitAddress(user.from) }}</span>
                                <button @click.stop="addFriend(user)">{{ $t('common.add') }}</button>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </section>
</template>

<script>
import store from "../../../store";
import FriendRequestView from "../contact/FriendRequestView.vue";
import {vOnClickOutside} from '@vueuse/components'
import {makeTopic,sendMessage} from "@/hooks/chat/mqtt.js"
import eth from "@/utils/eth.js"
import { getDate, splitAddress } from "@/utils/index.js";
export default {
    name: "SearchResultView",
    props: {
        query:[String,Number],
    },
    data() {
        return {
            splitAddress,
            sharedSearchState: store.state.search,

        }
    },

    mounted() {
        store.setSearchQuery(this.query)
    },

    beforeUnmount() {
        store.setSearchQuery('')
    },

    watch: {
        query() {
            store.setSearchQuery(this.query)
        }
    },

    methods: {
        addFriend(user) {
            this.$modal.show(
                FriendRequestView,
                {
                    userInfo: user,
                },
                null,
                {
                    name: 'friend-request-modal',
                    width: 600,
                    height: 250,
                    clickToClose: false,
                }, {})
        },
        async chatToContact(contact) {
            if (this.$router.currentRoute.path !== '/home') {
                this.$router.replace("/home");
            }
            const account = await eth.getAccount();
            let address = this.query.toLowerCase()
            let topic = makeTopic({ address: address });
            let conversation = {
          // 发送者
            direction: 0,
            id:  parseInt(new Date().getTime() / 1000) +  "" +  parseInt(Math.random() * 100000000),
            messageContent:{
                type:1,
                content:''
            },
            value: '',
            content: '',
            fromTo: address + "_" + account,
            topic,
            from: address,
            to: account,
            time: getDate(parseInt(new Date().getTime())),
            type: 1,
            num: 0,
            }
            store.setCurrentConversation(conversation);
            store.hideSearchView();
        },
    },

    computed: {
        userList(){
           return  [{
                 from:this.sharedSearchState.query
            }]
        }
    
    },

    directives: {
        vOnClickOutside
    },

}
</script>

<style lang="css" scoped>

.search-result-container {
    background: #ccc;
}

.search-result-container.active {
    display: block;
    z-index: 100;
    overflow: auto;
    /*background-color: red;*/
    background-color: #f3f3f3e5;
}

.search-result-container ul {
    list-style: none;
    background-color: white;
}


.category-item label {
    color: #b2b2b2;
    display: block;
    padding-top: 10px;
    padding-bottom: 2px;
    margin-left: 12px;
    font-size: 13px;
    border-bottom: 1px solid #eeeeee;
}

.search-result-item {
    background-color: white;
    padding: 10px 12px;
}

.search-result-item:active {
    background-color: #d9d9d9;
}

.search-result-item.contact {
    width: 100%;
    display: flex;
    align-items: center;
}

.search-result-item.contact img {
    width: 34px;
    height: 34px;
    border-radius: 2px;
}

.search-result-item.contact span {
    font-size: 14px;
    padding-left: 10px;
}

.search-result-item.contact button {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 3px;
    border: 1px solid #cccccc;
    outline: none;
}

.search-result-item.contact button:active {
    background: #cccccc;
}

.search-result-item.group {
    width: 100%;
    display: flex;
    align-items: center;
}

.search-result-item.group img {
    width: 34px;
    height: 34px;
    border-radius: 2px;
}

.search-result-item.group span {
    font-size: 14px;
    padding-left: 10px;
}

.search-result-item.message {
    height: 54px;
    display: flex;
    align-items: center;
    font-size: 13px;
}

.show-all {
    padding-left: 12px;
    color: #66789d;
    font-size: 12px;
}

</style>
